@extends('master')
@section('style')
<style>
	#content{margin-top: 50px;padding: 0px;padding-top: 20px;}
	#tools ul li{line-height: 20px;color: #666;border-radius: 5px;padding: 5px;font-size: 12px;}
	#tools ul li:hover{color: #259;background: rgba(225,225,225,.5);cursor: pointer;}
	#tools ul li span{padding: 5px;opacity: 0.5;}
	#flink span{display: inline-block;color: #999;}
	#flink span a{color: #999;}
	#content .col-md-8 .container-fluid .container{padding: 0px;}
	#content-ask{background: rgba(225,225,225,0.5);height: 50px;border-radius: 10px;}
	#content img{border-radius: 8px;}
	#content-ask ul li{color: #6c829f;margin-right: 1px solid #eee;padding: 15px;}
	#content-ask ul li:hover{cursor: pointer;color: #217ADE;}
	#content-ask ul li span{padding:0px 10px;}
	#content .item{height: 240px;border-bottom: 1px solid #ddd;padding: 10px 0px;font-size: 12px;}
	#content .item .col-md-1{height: 240px;padding: 10px;}
	#content .item .col-md-1 .btn{background: #EFF6FA;height: 20px;padding: 0px 10px;margin-top: 10px;}
	#content .item .col-md-1 .btn:hover{background: #ddd;}
	#content .item .col-md-12{padding: 0px;}
	#content .item .col-md-11 span,#item .col-md-11 h5{color: #999;}
	#content .item .col-md-11 .col-md-12{cursor: pointer;}
	#content .item #item-text{line-height: 25px; height: 125px;overflow: hidden;text-overflow:ellipsis;}
</style>
@endsection
<!-- 内容主题 -->
@section('content')
	<div id="content" class="container">
		<!-- 左边主题内容 start -->
		<div class="col-md-8">
		<!-- 第一栏 start -->
			<div class="container-fluid">
				<div class="col-md-1">
					<img width="40" src="{{session('face')}}" alt="">
				</div>
				<div id="content-ask" class="col-md-10">
					<div class="container">
						<div class="col-md-10">
							<ul class="list-unstyled list-inline">
								<li><span class="glyphicon glyphicon-question-sign"></span><a href="#" data-toggle="modal" data-target="#exampleModal" >提问</a></li>
								<li><span class="glyphicon glyphicon-list-alt"></span><a href="/question">问答</a></li>
								<li><span class="glyphicon glyphicon-pencil"></span><a href="/write">写文章</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		<!-- 第一栏 end -->
		<div class="clearfix"></div>
		<!-- 第二栏 start -->
			<div class="container-fluid">
				<div class="col-md-10"><span id="icon" class="glyphicon glyphicon-th-list"></span>最新动态</div>
				<!-- <div class="col-md-2"><span id="icon" class="glyphicon glyphicon-cog"></span><a href="">设置</a></div> -->
			</div>
		<!-- 第二栏 end -->
		<div class="clearfix"><hr></div>
		<!-- 具体内容栏 start -->
		@foreach($articles as $k=>$v)
		<div class="col-md-12 item">
			<div class="col-md-1">
				<!-- 用户头像 -->
				<img width="100%" src="{{$v->user->face}}" alt="">
				<!-- 点赞数 -->
				<div class="btn">{{$v['click']}}</div>
			</div>
			<div class="col-md-11">
				<!-- 所属话题 -->
				<div class="col-md-12"><span class="">来自栏目: <a href="http://nfangxu.cn/column/{{$v->column->id}}">{{$v->column->title}}</a></span></div>
				<div class="col-md-12">
					<!-- 文章标题 -->
					<h5><a href="http://nfangxu.cn/article/{{$v->id}}"><b>{{$v['title']}}</b></a></h5>
					<!-- 文章作者 -->
					<span><h5><a href="/show/{{$v->user->id}}"><b>{{$v->user->name}}</b></a> 搬运工</h5></span>
				</div>
				<div class="col-md-12">
					<div class="col-md-4" style="padding: 0px;">
						<!-- 文章图片 -->
						<img width="200" height="125" src="{{$v['images']}}" alt="">
					</div>
					<!-- 文章内容 -->
					<div class="col-md-7">
						<div id="item-text"><div style="overflow: hidden;text-overflow: ellipsis;">{!! $v['content'] !!}</div><a href="http://nfangxu.cn/article/{{$v->id}}">显示全部</a></div>
					</div>
					<div class="col-md-12">
						<ul class="list-unstyled list-inline">
							<li><span id="icon" class="glyphicon glyphicon-plus"></span><a href="">关注专栏</a></li>
							<li><span id="icon" class="glyphicon glyphicon-comment"></span><a href="">{{$v['discuss']}}条评论</a></li>
							<li><span id="icon" class="glyphicon glyphicon-share"></span><a href="">分享</a></li>
							<li><span id="icon" class="glyphicon glyphicon-earphone"></span><a href="">举报</a></li>
							<li><span id="icon" class="glyphicon glyphicon-list-alt"></span><a href="http://nfangxu.cn/article/{{$v->id}}">去往文章页</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		@endforeach
		<div class="clearfix"></div>
		<div class="col-md-12">{!! $articles->render() !!}</div>
		<!-- 具体内容栏 end -->
		</div>
		<!-- 左边主题内容 end -->
		<!-- 右边工具栏 start -->
		<div class="col-md-4">
			<div id="tools" class="container-fluid">
				<ul class="list-unstyled">
					<li><span class="glyphicon glyphicon-bookmark"></span><a href="">我的收藏</a></li>
					<li><span class="glyphicon glyphicon-file"></span>我关注的问题</li>
					<li><span class="glyphicon glyphicon-list-alt"></span>邀请我回答的问题</li>
					<hr>
					<li><span class="glyphicon glyphicon-th-list"></span>公共编辑状态</li>
					<li><span class="glyphicon glyphicon-home"></span>社区服务中心</li>
					<li><span class="glyphicon glyphicon-copyright-mark"></span>版权服务中心</li>
					<hr>
					<h5><b>知乎专栏</b></h5>
					<li><span><img src="holder.js/30x30?text=2" alt=""></span>专栏-发现</li>
					<hr>
				</ul>
				<!-- 友情链接 -->
				<span id="flink" style="color: #999;">
					<span><a href="#">刘看山</a></span> |
					<span><a href="#">知乎指南</a></span> |
					<span><a href="#">建议反馈</a></span> |
					<span><a href="#">移动应用</a></span> |
					<span><a href="#">加入知乎</a></span> |
					<span><a href="#">知乎协议</a></span> |
					<span><a href="#">举报投诉</a></span> |
					<span><a href="#">联系我们</a></span>
				</span><br>
				<span style="color: #999;">© 2017 知乎</span>
			</div>
		</div>
		<!-- 右边工具栏 start -->
	</div>
@endsection